<template>
  <!-- 商品列表 -->
  <div class="md-goods-box">
    <div class="md-goods-list" v-if="loading">
      <div class="md-goods-item" v-for="item in goodsInfo" :key="item.productId">
        <el-skeleton class="md-el-skeleton" :loading="loading" animated>
          <template slot="template">
            <div class="class-panel-loading">
              <el-skeleton-item variant="image" style="width: 100%; height: 139px;" />
              <div style="padding: 10px 10px 0px 10px;">
                <el-skeleton-item variant="h3" style="width: 80%;" />
                <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 10px; height: 16px;">
                  <el-skeleton-item variant="text" style="width: 30%; margin-right: 16px;" />
                  <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
              </div>
            </div>
          </template>
        </el-skeleton>
      </div>
    </div>
    <template v-else>
      <ul class="md-goods-list" v-if="goodsInfo.length">
        <li class="md-goods-item" v-for="item in goodsInfo" :key="item.productId">
          <a @click="handleDetailClick(item)">
            <div class="img-box">
              <img :src="JSON.parse(item.picture)[0]" :alt="item.title">
            </div>
            <div class="md-goods-description">
              <p class="md-goods-title">{{ item.title ? item.title : '--' }}</p>
              <!-- <p class="md-goods-count">
                <span>$<b>{{ item.seliingPrice ? item.seliingPrice : '--' }}</b>.00</span>
              </p>
              <p class="md-goods-count">
                <span>count: <i>{{ item.quantity ? item.quantity : '--' }}</i></span>
              </p> -->
              <el-button size="mini" class="free-btn" plain type="primary" @click.stop="handleApply(item)">Free Trial</el-button>
            </div>
          </a>
        </li>
      </ul>
      <p v-else style="text-align: center; color: #888; margin-bottom: 10px; padding-top: 200px;">
        <img src="@/assets/img/empty-msg.png" />
        <span style="display: block;">No More!</span>
      </p>
    </template>
    <md-apply-product-dialog :flag="flag" :dialogInfo="dialogInfo" @close="flag = false"></md-apply-product-dialog>
  </div>
</template>
<script>
export default {
  props: {
    goodsInfo: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
      flag: false,
      dialogInfo: {
        userId: '',
        productId: '',
        status: '2' // 待审核
      }
    }
  },
  methods: {
    handleDetailClick (item) {
      this.$router.push(`goodsDetail?productId=${item.productId}`)
    },
    async handleApply (item) {
      const user = this.$local.getItem('user') || ''
      if (user) { // 已经登录
        this.dialogInfo.userId = user.userId
        this.dialogInfo.productId = item.productId
        const res = await this.$axios.get(`web/userExperiencer/check/apply/${user.userId}`)
        if (res.code == 200) {
          if (res.data) { // 已经申请过，提示申请理由
            // this.$message.warning('you applied!')
            this.flag = true
          } else { // 没申请跳转到 申请页
            let u = `/experiencer/apply?path=${this.$route.path}`
            if (this.$getParamsStr(this.$route.query)) {
              u += `&${this.$getParamsStr(this.$route.query)}`
            }
            this.$router.push(u)
          }
        }
      } else {
        this.$router.push({
          path: '/login',
          query: {
            turnBackPath: location.href
          }
        })
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.md-goods-box {
  // margin-top: 25px;
  width: 100%;
  display: flex;
  justify-content: center;
  .md-goods-list {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    // padding: 10px 20px;
    // justify-content: space-between;
    flex-wrap: wrap;
    // height: 500px;
    // background: #db192a;
    .md-goods-item {
      // width: calc((100% - 15px * 3) / 4);
      width: 275px;
      height: 410px;
      margin-right: 25px;
      margin-bottom: 15px;
      border-radius: 6px;
      overflow: hidden;
      &:nth-child(4n) {
        margin-right: 10px;
      }
      &:hover {
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        transform: translate3d(0, -2px, 0);
      }
      a {
        display: inline-block;
        width: 100%;
        height: 100%;
        background: #fff;
        cursor: pointer;
        .img-box {
          width: 100%;
          height: 280px;
          padding: 20px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: center;
          img {
            width: auto;
            height: auto;
            max-width: 100%;
            max-height: 100%;
          }
        }
        .md-goods-description {
          width: 100%;
          height: 50%;
          border-radius: 0 0 6px 6px;
          padding: 15px;
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          .md-goods-title {
            min-height: 48px;
            font: normal 14px/1.667 PingFang SC, '微软雅黑', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
            color: #4c4c4c;
            @include block-ell(2);
            margin-bottom: 10px;
          }
          .md-goods-count {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 20px;
            span {
              color: #4c4c4c;
              font-size: 14px;
              b {
                font-size: 18px;
                // color: #db192a;
              }
              i {
                font-style: normal;
                color: #333;
              }
            }
          }
          .free-btn {
            width: 100%;
            // align-self: flex-end;
          }
        }
      }
    }
  }
}
</style>
